.h{
    height: 100%;
}
.flex-sb-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-sa-c {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-c-c-c {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.flexs {
    display: flex;
    justify-content: flex-start;
}

.flex-fs-c {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

// 上划线
.overline {
	text-decoration: overline;
}

.inline-block {
	display: inline-block;
}

.cursor {
	cursor: pointer;
}

.flex-1 {
	flex: 1 1 auto;
}

.borderWhite {
	border: 8px solid #ffffff;
}
.input-value-border {
	border: 2px solid #d6d6d6 !important;
}
.iptBorder {
	border: 2px solid #d6d6d6;
	// border: 2px solid #e5e5e5;
	border-radius: 10px;
	padding: 12px 18px;
}

.btnDanger {
	text-align: center;
	padding: 16px 20px;
	border-radius: 6px;
	color: white;
	background-color: #af3756;
	font-weight: 400;
}
.btnDangerRound {
	text-align: center;
	padding: 16px 60px;
	border-radius: 100px;
	color: #af3756;
	border: 4px solid #af3756;
	font-weight: 400;
}
.btnInfo {
	text-align: center;
	padding: 16px 20px;
	border-radius: 6px;
	font-weight: 400;
	border: solid 2px #eaebec;
}

/**
 * 状态栏
 */
.status-bar {
	width: 100%;
	height: var(--status-bar-height);
}

.box-sizing {
	box-sizing: border-box;
}

/**
 * 缩进
 */
.text-indent {
	text-indent: 50px;
}
/**
 * 禁用按钮
 */
.disabled-btn {
	opacity: 0.5;
	pointer-events: none;
}
// 超出省略号
.overflow {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/**
   * 不换行
   */
.flex-nowrap {
	white-space: nowrap;
	word-break: keep-all;
}


// 下划线
.underline {
	text-decoration: underline;
}

// 删除线
.line-through {
	text-decoration: line-through;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}

// 定义宽度
@for $i from 0 through 500 {
	.w-#{$i} {
		width: $i + px;
	}
}
// 定义高度
@for $i from 0 through 500 {
	.h-#{$i} {
		height: $i + px;
	}
}
// 定义top
@for $i from -10 through 80 {
	.top-#{$i} {
		top: $i + px;
	}
}

// 定义bottom
@for $i from 0 through 80 {
	.bottom-#{$i} {
		bottom: $i + px;
	}
}

// 定义left
@for $i from 0 through 80 {
	.left-#{$i} {
		left: $i + px;
	}
}

// 定义right
@for $i from -10 through 80 {
	.right-#{$i} {
		right: $i + px;
	}
}

.flexs_center {
	display: flex;
	justify-content: center;
	align-items: center;
}

//方向
.flex,
.flex-row {
	display: flex;
	flex-direction: row;
}


.flexs_between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex_between {
	display: flex;
	justify-content: space-between;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
//对齐方式
.items-center {
	align-items: center;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
.items-end {
	align-items: flex-end;
}
.items-start {
	align-items: flex-start;
}

.justify-start {
	justify-content: flex-start;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-end {
	justify-content: flex-end;
}
.justify-around {
	justify-content: space-around;
}
.flex-wrap {
	flex-wrap: wrap;
}

/*文本对齐方式*/
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.font-bold {
	font-weight: bold;
}

.bg-white {
	background-color: #ffffff;
}

.bg-base {
	background-color: #f5f5f5;
}

.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

// 定义字体粗体
.font-medium {
	font-weight: 500;
}
.font-normal {
	font-weight: 400;
}
.font-light {
	font-weight: 300;
}

.line-height-1 {
	line-height: 1;
}

/* icon大小 */
@for $i from 2 through 300 {
	.icon-#{$i} {
		width: $i + px;
		height: $i + px;
	}
}


// 定义行高
@for $i from 2 through 80 {
	.line-height-#{$i} {
		line-height: $i + px;
	}
}

.flex_reverse {
	display: flex;
	flex-direction: row-reverse;
}

// 自定背景义颜色
$colors: (
	"gray": #f8f8f8,
	"info": #7e7e7e,
	"primary": #3c9cff,
	"primary20": #ebf5ff,
	"danger": #af3756,
	"success": #5ac725,
	"black": #000000,
	"blue": #00f,
	"green": #0f0,
	"white": #ffffff,
	"warning": #ff8d1a,
	"warning50": #fff4e6
);
@each $colorName, $colorValue in $colors {
	.bg-#{$colorName} {
		background-color: $colorValue;
	}
}

@each $colorName, $colorValue in $colors {
	.tc-#{$colorName} {
		color: $colorValue;
	}
}
@each $colorName, $colorValue in $colors {
	.bc-#{$colorName} {
		border: 2px solid $colorValue;
	}
}

// 自定义圆
@for $i from 1 through 100 {
	.round-#{$i} {
		width: $i + px;
		height: $i + px;
		border-radius: 2 * $i + px;
	}
}
// 定义字体大小
@for $i from 10 through 80 {
	.font-#{$i} {
		font-size: $i + px;
	}
}

// 定义圆角
@for $i from 1 through 40 {
	.radius-#{$i} {
		border-radius: $i + px;
	}
}

// 边框
@for $i from 1 through 40 {
	.borderWhite-#{$i} {
		border: $i + px solid #fff;
	}
}

// 定义内外边距，历遍1-80
@for $i from 0 through 100 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		.m-#{$i} {
			margin: $i + px !important;
		}
		.mt-#{$i} {
			margin-top: $i + px !important;
		}
		.mb-#{$i} {
			margin-bottom: $i + px !important;
		} // 左右
		.mx-#{$i} {
			margin-left: $i + px !important;
			margin-right: $i + px !important;
		}
		// 上下
		.my-#{$i} {
			margin-top: $i + px !important;
			margin-bottom: $i + px !important;
		}
		// 得出：padding-30或者p-30
		.p-#{$i} {
			padding: $i + px !important;
		}

		.pt-#{$i} {
			padding-top: $i + px !important;
		}
		.pb-#{$i} {
			padding-bottom: $i + px !important;
		}
		// 左右内边距
		.px-#{$i} {
			padding-left: $i + px !important;
			padding-right: $i + px !important;
		}
		// 上下内边距
		.py-#{$i} {
			padding-top: $i + px !important;
			padding-bottom: $i + px !important;
		}

		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： ml-30
			// 定义外边距
			.m#{$short}-#{$i} {
				margin-#{$long}: $i + px !important;
			}

			// 定义内边距
			.p#{$short}-#{$i} {
				padding-#{$long}: $i + px !important;
			}
		}
	}
}
